<template>
	<div class="setting-user">
		<div class="setting-card">
			<div class="setting-item-title">微博首页</div>
			<div class="setting-item-content">
				<el-input placeholder="联系我-微博链接" v-model="form.weibo" clearable>
				</el-input>
			</div>
		</div>
		<div class="setting-card">
			<div class="setting-item-title">联系邮箱</div>
			<div class="setting-item-content">
				<el-input placeholder="联系我-邮箱地址" v-model="form.email" clearable>
				</el-input>
			</div>
		</div>
		<div class="setting-card">
			<div class="setting-item-title">github</div>
			<div class="setting-item-content">
				<el-input placeholder="联系我-github首页" v-model="form.github" clearable>
				</el-input>
			</div>
		</div>
		<div class="setting-card">
			<div class="setting-item-title">微信二维码</div>
			<div class="setting-item-content">
				<ImgUpload :type="type" :src="form.wechat" @uploadSuccess="uploadSuccess"></ImgUpload>
			</div>
		</div>
		<sub-foot :prompt="prompt" :loading="loading" @saveChange="save"></sub-foot>
	</div>
</template>

<script>
	import SubFoot from 'components/setting/sub-foot'
    import {mapGetters,mapMutations} from 'vuex'
	import ImgUpload from 'plugs/upload/upload'
    import {deepClone} from 'common/func'

	export default {
		computed:{
	        ...mapGetters([
	            'contact'
	       	])
	    },
		data() {
			return {
				prompt: '这些将在页面加载时附加 可通过网页源码查看',
				form: {
					weibo: '',
					email: '',
					wechat: '',
					github: '',
				},
				loading: false,
				type: 'wechat'
			}
		},
		created() {
			this.form = deepClone(this.contact)
		},
		methods: {
			uploadSuccess(src) {
				this.form.wechat = src
			},
			save() {
				this.loading = true
				this.$http.post('setContactMe',this.form).then((response) => {
					this.setContact(deepClone(this.form))
					this.loading = false
					this.$notify({
			          title: '系统设置操作成功',
			          message: '缓存将在10分钟后重新生成',
			          type: 'success'
			        })
				})
			},
			...mapMutations({
	            setContact: 'SET_CONTACT'
	        })
		},
		components: {
			SubFoot,ImgUpload
		}
	}
</script>

<style scope>
</style>